<template>
  <my-container>
    <!--顶部操作-->
    <template #header>
      <el-form class="ad-form-query" :inline="true" @submit.native.prevent>
        <el-form-item>
          <my-search :fields="fields" @click="onSearch" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onsearchWindowVisible">高级查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click.native="handleAdd">新增</el-button>
        </el-form-item>
        <el-form-item>
          <my-confirm-button
            :type="'delete'"
            :placement="'bottom-end'"
            style="margin-left: 0px;"
          >
            <template #content>
              <p>确定要批量删除吗？</p>
            </template>
            批量删除
          </my-confirm-button>
        </el-form-item>
      </el-form>
    </template>

    <!--列表-->
    <el-table
      v-loading="listLoading"
      :data="articles"
      highlight-current-row      
      height="'100%'"
      style="width: 100%;height:100%;"
      @selection-change="onSelsChange"
    >
      <el-table-column type="selection" width="50" />
      <el-table-column type="index" width="80" label="#" />
      <el-table-column prop="title" label="标题" width />
      <el-table-column prop="subTitle" label="副标题" width />     
      <el-table-column prop="categoryName" label="分类" width />
      <el-table-column prop="articleCategoryId" label="分类" v-if="false" width />
      <el-table-column prop="createdTime" label="创建时间" width />     
      <el-table-column label="操作" width="180">
        <template #default="{ $index, row }">
          <el-button @click.native="onEdit($index, row)">编辑</el-button>
          <my-confirm-button
            v-if="checkPermission(['api:material:article:softdelete'])"
            :type="'delete'"
            :icon="'el-icon-delete'"
            @click="onDelete($index, row)"
          />
        </template>
      </el-table-column>
    </el-table>

    <!--分页-->
    <template #footer>
      <my-pagination
        ref="pager"
        :total="total"
        :checked-count="sels.length"
        @get-page="getArticles"
      />
    </template>
    <!--分页-->
    
    <!--高级查询窗口-->
    <my-search-window
      :visible.sync="searchWindowVisible"
      :fields="fields"
      :modal="false"
      @click="onSearchFilter"
    />
    <!--高级查询窗口-->
  </my-container>
</template>

<script>
import { formatTime } from '@/utils'
import { getArticleListPage, removeArticle } from '@/api/material/article'
import MyContainer from '@/components/my-container'
import MyConfirmButton from '@/components/my-confirm-button'
import MySearch from '@/components/my-search'
import MySearchWindow from '@/components/my-search-window'

export default {
  name: 'Articles',
  components: { MyContainer, MyConfirmButton, MySearch, MySearchWindow },
  data() {
    return {
      // 高级查询字段
      fields: [
        { value: 'title', label: '标题', default: true },
        { value: 'subTitle', label: '副标题', type: 'string' },
        { value: 'createdTime', label: '创建时间', type: 'date', operator: 'daterange',
          config: { type: 'daterange', format: 'yyyy-MM-dd', valueFormat: 'yyyy-MM-dd' }
        }
      ],
      searchWindowVisible: false,
      dynamicFilter: null,

      articles: [],
      total: 0,
      sels: [], // 列表选中列
      listLoading: false,      
    }
  },
  async mounted() {
    await this.getArticles()
  },
  methods: {
    // 获取文章列表
    async getArticles() {
      var pager = this.$refs.pager.getPager()
      const params = {
        ...pager,
        dynamicFilter: this.dynamicFilter
      }

      this.listLoading = true
      const res = await getArticleListPage(params)
      this.listLoading = false

      if (!res?.success) {
        return
      }

      this.total = res.data.total
      const data = res.data.list
      data.forEach(d => {
        d._loading = false
      })
      this.articles = data
    },   
    // 选择
    onSelsChange(sels) {
      this.sels = sels
    },
    // 查询
    onSearch(dynamicFilter) {
      this.$refs.pager.setPage(1)
      this.dynamicFilter = dynamicFilter
      this.getArticles()
    },
    // 高级查询显示
    onsearchWindowVisible() {
      this.searchWindowVisible = true
    },
    // 高级查询
    onSearchFilter(dynamicFilter) {
      this.$refs.pager.setPage(1)
      this.dynamicFilter = dynamicFilter
      this.getArticles()
      this.searchWindowVisible = false
    },
    // 新增
    handleAdd() {
      this.$router.push('/material/addOrEditArticle')
    },
    // 编辑
    onEdit(index, row) {     
      this.$router.push({
        name: '/material/addOrEditArticle',
        params: {
          id: row.id,
        }
      })
    },
    async onDelete(index, row) {
      row._loading = true
      const para = { id: row.id }
      const res = await removeArticle(para)
      row._loading = false  

      if (!res?.success) {
        return
      }
      this.$message({
        message: '删除成功',
        type: 'success'
      })

      this.getArticles()
    },
  }
}
</script>

<style lang="scss" scoped>
.my-search ::v-deep .el-input-group__prepend {
  background-color: #fff;
}
</style>
